<template>
	<div id="poster_manage" class="container">
		<div class="content">
			<div class="title">海报管理</div>
			<div class="panel">
				<div class="condition">
					<div class="row_one">
						<el-input style="width: 3.5rem;" placeholder="搜索 海报名称" clearable
			   				 		  v-model="param.posterName" class="input_search" maxlength="100">
			  			</el-input>
			  			&nbsp;
			  			<div class="search_btn" v-if="hasApi('posterList')" @click="search()">搜索</div>
						
						<div class="right_btn" v-if="hasApi('posterAdd')" @click="openAdd()">新建海报</div>
					</div>
				</div>
				
				<div>
					<table class="table" cellspacing="0">
						<thead class="thead">
							<tr>
								<td style="width: 2rem;">序号</td>
								<td style="width: 4rem;">海报名称</td>
								<td style="width: 3rem;">创建时间</td>
								<td style="width: 2rem;">创建人</td>
								<td style="width: 6rem;">操作</td>
							</tr>
						</thead>
						<tbody class="tbody">
							<tr v-for="item,index in posterList">
								<td>{{(param.currPage-1) * param.pageSize + index + 1}}</td>
								<td>
									<el-popover
										class="poster_preveiew_popover"
									  placement="left"
									  :width="previewWidth"
									  trigger="hover">
									  	<div class="poster_div">
									  		<posterMobile :previewId="item.posterId"></posterMobile>
									  	</div>
										<div slot="reference" class="preview"></div>
									</el-popover>
									{{item.posterName}}
								</td>
								<td>{{item.createTime}}</td>
								<td>{{item.createUserName}}</td>
								<td>
									<span class="operate_btn" v-if="hasApi('posterUpdate')" @click="openEdit(item)">编辑</span>
									&nbsp;
									
									<el-popover
									  placement="bottom"
									  :width="spreadWidth"
									  trigger="click">
									  
									 	<div class="spread">
											<div class="spread_title">
												<div :class="item.spreadType==1?'spread_active':''" @click="item.spreadType=1">海报二维码</div>
												<div :class="item.spreadType==2?'spread_active':''" @click="item.spreadType=2">海报链接</div>
											</div>
											<div class="spread_qrCode" v-show="item.spreadType==1">
												<div class="spread_qrCode_1" :id="'qrCode'+item.posterId"></div>
												<div class="spread_qrCode_2">扫码后直接获取海报</div>
												<div class="spread_qrCode_3" @click="downloadQrCode(item,$event)">下载二维码</div>
											</div>
											<div class="spread_url" v-show="item.spreadType==2">
												<div>海报链接</div>
												<el-input class="spread_url_2" placeholder="请输入内容" :value="item.posterUrl" readonly>
												    <el-button slot="append" @click="copyUrl($event)">复制</el-button>
												</el-input>
											</div>
										</div>
									  	<span slot="reference" class="operate_btn">推广</span>
									</el-popover>
									
									&nbsp;
									<span class="operate_btn" v-if="hasPage('64')" @click="openDownload(item)">活码下载</span>
									&nbsp;
									<span class="operate_btn" v-if="hasApi('posterDelete')" @click="toDelete(item.posterId)">删除</span>
								</td>
							</tr> 
						</tbody>
					</table>
				</div>
				<el-pagination
			      layout="total, sizes, prev, pager, next, jumper"
			      :current-page="param.currPage"
			      @size-change="pageSizeChange"
		      	  @current-change="pageIndexChange"
			      :total="count">
			    </el-pagination>
			</div>
		</div>
		
		<posterAdd ref="posterAdd" @callback="closeAdd"></posterAdd>
		<posterEdit ref="posterEdit" @callback="closeEdit"></posterEdit>
	</div>
</template>

<script>
	
import QRCode from 'qrcodejs2'; // 引入qrcode	
import posterAdd from './common/poster_add'
import posterEdit from './common/poster_edit'
import posterMobile from '@keer/components/mobile/poster'
	
var vm,dict,user;
export default {
	components : {
		posterAdd,posterEdit,posterMobile
	},
	data : function() {
		return {
			param : {
				posterName : "",
				campusId : this.$store.state.campusId,
				currPage : 1,
				pageSize : 10
			},
			count : null,
	        posterList : [],
	        channelMode : null,
	        channelModeMap : null,
	        spreadWidth : 3.44*rem,
	        previewWidth : 2.12*rem
		}
	},
	methods : {
		search : function(currPage) {
			vm.param.currPage = currPage || 1;
			
			api.posterList(vm.param).then(function(data) {
				
				//拼接移动端海报页面链接
				var path = window.location.href;
				path = path.substring(0, path.indexOf("#"));
				path = path.substring(0, path.lastIndexOf("/"));
				path += "/mobile.html#/poster";
				path += "?userId=" + user.userId;
				path += "&posterId=";
				
				data.list.forEach(function(item) {
					item.spreadType = 1;
					item.posterUrl = path + item.posterId;
				});
				vm.posterList = data.list;
				vm.count = data.totalCount;
				
				//渲染列表后,生成二维码
				vm.$nextTick(()=>{
					data.list.forEach(function(item) {
						new QRCode("qrCode"+item.posterId, {
							width: 160,
							height: 160,
							text: item.posterUrl
						});
					});
				});
				
			})
		},
		campusChange : function(campusId) { //校区改变
			vm.param.campusId = campusId;
			vm.search();
		},
		pageSizeChange : function(val) { //页条数发生改变
	  		vm.param.pageSize = val;
	    	vm.search();
	  	},
	  	pageIndexChange : function(val) { //页码发生改变
	    	vm.param.currPage = val;
	    	vm.search(val);
	  	},
	  	toDelete : function(posterId) {
	  		tool.confirm("确认删除?", {
        		confirmButtonText: "确定",
        		cancelButtonText: "取消",
        		type: 'warning'
       	 	}).then(function() {
          		api.posterDelete({posterId : posterId}).then(function(data) {
		  			vm.search();
		  			tool.message({ showClose: true, message: "删除成功", type: 'success' });
		  		})
        	});
	  		
	  	},
	  	copyUrl : function(e) {  //复制链接
	  		//获取链接输入框,
	  		var $input = $(e.currentTarget).parent().prev();
	  		//选中,复制
		    $input.select();
		    document.execCommand('copy');
		    //取消选中,取消聚焦
		    window.getSelection().empty();
		    $input.blur();
		    tool.message({type:"success",message:"复制成功",duration:1500,showClose: true});
	  	},
	  	downloadQrCode : function(poster, e) {  //下载二维码
	  		//获取图片元素
	  		var $img = $(e.currentTarget).parent().find("img");
	  		//生成a标签,设置路径和下载名
	        var a = document.createElement('a');          
	        a.download = poster.posterName + '二维码';               
	        a.href = $img.attr("src"); 
	        //触发a标签点击事件
	        a.dispatchEvent(new MouseEvent('click'));
	  	},
	  	openDownload : function(item) {
	  		//打开活码下载页面
	  		var path = vm.$store.state.permit["64"].path;
	  		 vm.$router.push({
		        path: path,
		        query: {
		          posterId: item.posterId,
		        }
		    });
	  	},
		openAdd : function() {//清空列表,好让新的列表中的预览页面会重新加载
			vm.posterList = [];
			vm.$refs.posterAdd.init();
		},
		closeAdd : function() {
			vm.search();
		},
		openEdit : function(channel) {
			vm.$refs.posterEdit.init(channel);
		},
		closeEdit : function() {
			//清空列表,好让新的列表中的预览页面会重新加载
			vm.posterList = [];
			vm.search();
		}
	},
	mounted : function() {
		
	},
	created : function() {
		vm = this;
		//请求列表数据
		vm.search();
		
		//获取数据字典对象
		user = tool.getItem(lsKey.user,true);
	}
}

</script>

<style lang="scss">
	#poster_manage {
		.el-input__inner {
			border-radius: 0.08rem;
			font-size: 0.16rem;
			color: #666666;
			height: 0.36rem;
			line-height: 0.36rem;
		}
		.el-input__icon {
			line-height: 0.36rem;
		}
		
		.input_search {
			.el-input__inner {
				background-color: rgb(247,248,250);
			}
		}
	}
	.spread_qrCode_1 img{
		width: 1.6rem;
		height: 1.6rem;
	}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
	
	.poster_div {
		width: 1.88rem;
		height: 3.36rem;
		overflow: hidden;
	}
	.poster {
		transform: scale(0.5) translate(-50%,-50%);
	}
	.right_btn {
		background-image: url(~@/assets/img/clue_manage/add_white.png);
	}
	.preview {
		display: inline-block;
		width: 0.28rem;
		height: 0.28rem;
		background: url(~@keer/assets/img/operation_manage/poster_preview.png)
					no-repeat center / 0.24rem;
		cursor: pointer;
		vertical-align: top;
		position: relative;
		top: -0.01rem;
	}
	
	.spread {
		/*outline: 1px solid red;*/
		font-size: 0.16rem;
		width: 3.2rem;
	}
	.spread_title {
		width: 3.2rem;
		height: 0.44rem;
		line-height: 0.44rem;
		border-bottom: 0.01rem solid #dedede;
	}
	.spread_title>div {
		float: left;
		width: 50%;
		height: 0.44rem;
		text-align: center;
		cursor: pointer;
		font-weight: bold;
		font-size: 0.15rem;
		color: #666666
	}
	.spread_active {
		border-bottom: 0.02rem solid #3885f8;
	}
	.spread_qrCode {
		height: 2.6rem;
		padding-top: 0.3rem;
		text-align: center;
		line-height: 0.2rem;
		/*outline: 1px solid red;*/
	}
	.spread_qrCode_1 {
		width: 1.6rem;
		height: 1.6rem;
		margin: 0 auto;
		background: #888888;	
	}
	.spread_qrCode_2 {
		padding: 0.15rem 0 0.08rem 0;
	}
	.spread_qrCode_3 {
		color: #2e83f6;
		text-decoration: underline;
		width: 1rem;
		margin: 0 auto;
		cursor: pointer;
	}
	
	.spread_url {
		height: 2.7rem;
		padding-top: 0.3rem;
		line-height: 0.2rem;
	}
	.spread_url_2 {
		padding-top: 0.15rem;
	}
</style>